<template>
  <div class="dataScreen-container">
    <dv-loading class="dataV-loading" v-if="isLoading">Loading...</dv-loading>
    <dv-full-screen-container v-else class="fullScreen-container">
      <div class="dataScreen-title-container">
        <div class="title-left-content">
          <div class="left-content">
            <div class="logo-content">
              <dv-decoration-12 style="width:20px;height:20px;" />
              <div class="logo-title"><span>香菜园</span></div>
            </div>
            <div class="date-content">
              <span class="date-list">{{ currentTime }}</span>
              <span class="date-list">{{ currentDate }}</span>
              <span class="date-list">{{ currentWeek }}</span>
            </div>
          </div>
          <dv-decoration-10 style="width:90%;height:7px;" />
        </div>
        <div class="title-content">
          <dv-decoration-8 :reverse="true" style="width:40%;height:54px;" />
          <dv-decoration-11 class="decoration-title">全国网络中心连接数据平台</dv-decoration-11>
          <dv-decoration-8 style="width:40%;height:54px;" />
        </div>
        <div class="middle-left-decoration">
          <dv-decoration-3 style="width:210px;height:24px;" />
        </div>
        <div class="middle-right-decoration">
          <dv-decoration-3 style="width:210px;height:24px;" />
        </div>
        <div class="title-right-content">
          <div class="right-content">
            <div class="location-container position-info">
              <svg-icon class="icon-svg-width" iconClass="location"></svg-icon>
              <span class="position-name">{{ city }}</span>
            </div>
            <div class="weather-container position-info">
              <svg-icon class="icon-svg-width" :iconClass="weatherIcon"></svg-icon>
              <span class="position-name">{{ weather }}
                <span class="position-name" style="margin-left: 10%;">{{ temperature }} ℃</span>
             </span>
            </div>
            <div class="system-name"><span>网络连接调解系统</span></div>
          </div>
          <dv-decoration-10 style="width:90%;height:7px; transform: rotate(180deg); margin-left: 52px;" />
        </div>
      </div>
      <div class="dataScreen-content">
        <div class="left-content-area">
          <div class="platform-introduction">
            <platformIntroduction/>
          </div>
          <div class="network-frame">
            <networkFrame/>
          </div>
          <div class="network-center">
            <networkCenter/>
          </div>
        </div>
        <div class="middle-content-area">
          <div class="network-connection">
            <networkConnection/>
          </div>
          <div class="network-status">
            <div class="network-success">
              <networkSuccess/>
            </div>
            <div class="network-break">
              <networkBreak/>
            </div>
          </div>
        </div>
        <div class="right-content-area">
          <div class="network-repair">
            <networkRepair/>
          </div>
          <div class="network-speed">
            <networkSpeed/>
          </div>
          <div class="network-operator">
            <networkOperator/>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import platformIntroduction from './components/platformIntroduction'
import networkFrame from './components/networkFrame'
import networkCenter from './components/networkCenter'
import networkSuccess from './components/networkSuccess'
import networkBreak from './components/networkBreak'
import networkRepair from './components/networkRepair'
import networkSpeed from './components/networkSpeed'
import networkOperator from './components/networkOperator'
import networkConnection from './components/networkConnection'
export default {
  name: 'index',
  components:{
    platformIntroduction,
    networkFrame,
    networkCenter,
    networkSuccess,
    networkBreak,
    networkRepair,
    networkSpeed,
    networkOperator,
    networkConnection,
  },
  data(){
    return{
      isLoading: false,
      currentTime: null,
      currentDate: null,
      currentWeek: null,
      city: null,
      weather: null,
      temperature: null,
      weatherIcon: null,
    }
  },
  mounted () {
    this.init()
    this.getCurrentDate()
    this.getWeekday()
    this.getCurrentTime()
    setInterval(() =>{
      this.getCurrentTime()
    },1000)
    this.getCity()
  },
  methods:{
    init(){
      this.isLoading = true
      setTimeout(() =>{
        this.isLoading = false
      },1000)
    },
    getCurrentDate(){
      const nowDate = new Date()
      const month =  nowDate.getMonth() + 1
      this.currentDate = nowDate.getFullYear() + '年' + month + '月' + nowDate.getDate() + '日'
    },
    getWeekday(){
      const num = new Date().getDay()
      const weekList = new Array("日", "一", "二", "三", "四", "五", "六");
      this.currentWeek = '星期' + weekList[num]
    },
    getCurrentTime(){
      const nowDate = new Date()
      const hours = nowDate.getHours()
      const minutes = nowDate.getMinutes()
      const seconds = nowDate.getSeconds()
      this.currentTime = (hours > 9 ? hours : '0'+hours) + ':'
        + (minutes > 9 ? minutes : '0'+minutes) + ':'
        + (seconds > 9 ?  seconds : '0'+seconds)
    },
    // 获取当前城市定位
    getCity(){
      let _this = this
      AMap.plugin('AMap.CitySearch', function () {
        let citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            _this.city = result.city == result.province ? result.city : `${result.province}${result.city}`
            _this.getWeather(result.city)
          }
        })
      })
    },
    // 获取天气
    getWeather(city){
      let _this = this
      //加载天气查询插件
      AMap.plugin('AMap.Weather', function() {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function(err, data) {
          console.log(err, data);
          if(data.info == 'OK'){
            _this.weather = data.weather
            _this.temperature = data.temperature
            _this.getWeatherIcon(data.weather)
          }
        });
      });
    },
    // 根据天气获取对应的天气图标
    getWeatherIcon(type){
      const weather = ['sun','fog','rain','snow','typhoon','overcast','cloud']
      if(type.indexOf('晴') > -1){
        this.weatherIcon = weather[0]
      }else if(type.indexOf('雾') > -1){
        this.weatherIcon = weather[1]
      }else if(type.indexOf('雨') > -1){
        this.weatherIcon = weather[2]
      }else if(type.indexOf('雪') > -1){
        this.weatherIcon = weather[3]
      }else if(type.indexOf('台风') > -1){
        this.weatherIcon = weather[4]
      }else if(type.indexOf('阴') > -1){
        this.weatherIcon = weather[5]
      }else{
        this.weatherIcon = weather[6]
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.dataV-loading{
  height: 100vh;
  background: #071839;
  color: #1acee9;
}
.fullScreen-container{
  background: #071839;
}
/* 大屏标题样式 */
.dataScreen-title-container{
  height: 10%;
  width: 100%;
  display: flex;
  position: relative;
}
.title-content{
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
}
.decoration-title{
  width: 20%;
  height: 60px;
  color: white;
}
.title-left-content{
  width: 30%;
  height: 100%;
  position: absolute;
  left: 0;
}
.left-content{
  width: 100%;
  height: 80%;
  display: flex;
}
.logo-content{
  width: 25%;
  height: 30%;
  color: #11b9c8;
  margin-top: 11%;
  margin-left: 6%;
  text-align: left;
  display: flex;
}
.logo-title{
  line-height: 23px;
  margin-left: 4px;
  font-weight: 600;
}
.date-content{
  width: 55%;
  height: 30%;
  margin-top: 11%;
  color: #11b9c8;
  text-align: left;
}
.date-list{
  margin-right: 15px;
  font-weight: 600;
}
.title-right-content{
  width: 30%;
  height: 100%;
  position: absolute;
  right: 0;
}
.right-content{
  width: 100%;
  height: 80%;
  text-align: left;
  color:  #11b9c8;
  display: flex;
}
.position-info{
  height: 30%;
  margin-top: 11%;
  margin-right: 5%;
}
.location-container{
  margin-left: 10%;
}
.weather-container{
  width: 40%;
}
.position-name{
  line-height: 23px;
  margin-left: 4px;
  font-weight: 600;
}
.system-name{
  height: 30%;
  margin-top: 11%;
}
.middle-left-decoration{
  position: absolute;
  left: 493px;
  top: 60px;
}
.middle-right-decoration{
  position: absolute;
  left: 1043px;
  top: 60px;
}
/* 大屏内容区域样式 */
.dataScreen-content{
  width: 96%;
  height: 73%;
  margin: 0 auto;
  display: flex;
  color: #fff;
}
/* 大屏内容左侧区域样式 */
.left-content-area{
  width: 24%;
  height: 100%;
}
.platform-introduction{
  width: 100%;
  height: 31%;
  margin-bottom: 4%;
}
.network-frame{
  width: 100%;
  height: 31%;
  margin-bottom: 4%;
}
.network-center{
  width: 100%;
  height: 33%;
}

/* 大屏内容中间区域样式 */
.middle-content-area{
  width: 52%;
  height: 100%;
}
.network-connection{
  width: 96%;
  height: 64%;
  margin: 0 auto 2%;
}
.network-status{
  width: 96%;
  height: 33%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.network-success{
  width: 49%;
  height: 100%;
}
.network-break{
  width: 49%;
  height: 100%;
}


/* 大屏内容右侧区域样式 */
.right-content-area{
  width: 24%;
  height: 100%;
}
.network-repair{
  width: 100%;
  height: 24%;
  margin-bottom: 4%;
}
.network-speed{
  width: 100%;
  height: 24%;
  margin-bottom: 4%;
}
.network-operator{
  width: 100%;
  height: 47%;
}
</style>
<style lang="scss">
.decoration-title{
  .decoration-content{
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
